<!-- eslint-disable vue/no-parsing-error -->
<template>
  <div class="container">
    <div class="month-title">
      <div><el-button type="text" plain @click="lastYear"><<</el-button></div>
      <div>{{ year }}年</div>
      <div><el-button type="text" plain @click="nextYear">>></el-button></div>
    </div>
    <el-divider style="width: 92%; margin-left: 2vw"></el-divider>
    <div class="month-table">
      <table>
        <tbody align="center" valign="center">
          <tr>
            <td
              :class="month[`${year}-01`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-01`)"
            >
              一月
            </td>
            <td
              :class="month[`${year}-02`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-02`)"
            >
              二月
            </td>
            <td
              :class="month[`${year}-03`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-03`)"
            >
              三月
            </td>
            <td
              :class="month[`${year}-04`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-04`)"
            >
              四月
            </td>
          </tr>
          <tr>
            <td :class="month[`${year}-01`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-01`] }}
            </td>
            <td :class="month[`${year}-02`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-02`] }}
            </td>
            <td :class="month[`${year}-03`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-03`] }}
            </td>
            <td :class="month[`${year}-04`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-04`] }}
            </td>
          </tr>
          <tr>
            <td
              :class="month[`${year}-05`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-05`)"
            >
              五月
            </td>
            <td
              :class="month[`${year}-06`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-06`)"
            >
              六月
            </td>
            <td
              :class="month[`${year}-07`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-07`)"
            >
              七月
            </td>
            <td
              :class="month[`${year}-08`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-08`)"
            >
              八月
            </td>
          </tr>
          <tr>
            <td :class="month[`${year}-05`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-05`] }}
            </td>
            <td :class="month[`${year}-06`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-06`] }}
            </td>
            <td :class="month[`${year}-07`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-07`] }}
            </td>
            <td :class="month[`${year}-08`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-08`] }}
            </td>
          </tr>
          <tr>
            <td
              :class="month[`${year}-09`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-09`)"
            >
              九月
            </td>
            <td
              :class="month[`${year}-10`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-10`)"
            >
              十月
            </td>
            <td
              :class="month[`${year}-11`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-11`)"
            >
              十一月
            </td>
            <td
              :class="month[`${year}-12`] > 0 ? 'red' : 'green'"
              @click="toSheet(`${year}-12`)"
            >
              十二月
            </td>
          </tr>
          <tr>
            <td :class="month[`${year}-09`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-09`] }}
            </td>
            <td :class="month[`${year}-10`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-10`] }}
            </td>
            <td :class="month[`${year}-11`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-11`] }}
            </td>
            <td :class="month[`${year}-12`] > 0 ? 'red' : 'green'">
              {{ month[`${year}-12`] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { getStatis } from "@/api/getList.js";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const date = ref(new Date());
const year = ref(date.value.getFullYear());
const month = ref({});
const getStatisData = () => {
  const data = {
    year: year.value,
    dimension: 1,
  };
  getStatis(data).then((res) => {
    month.value = res.data;
  });
};
const lastYear = () => {
  year.value--;
  getStatisData();
};
const nextYear = () => {
  year.value++;
  getStatisData();
};
const toSheet = (month, PATH = "Profit") => {
  router.push({
    name: PATH,
    state: {
      startMonth: month,
      endMonth: month,
    },
  });
};
onMounted(() => {
  getStatisData();
});
// eslint-disable-next-line vue/no-parsing-error
</script>
<style lang="less" scoped>
.container {
  height: 50vh !important;
  display: flex;
  flex-direction: column;
  .month-title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .month-table {
    height: 100%;
    table {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      align-content: center;
      margin-top: 1vh;
      tbody {
        height: 100%;
        width: 100%;
        tr {
          height: 7vh;
          width: 60vw;
          margin: 0;
          td {
            width: 50vw;
            align-content: center;
          }
        }
      }
    }
  }
}
.red {
  color: #bd3124 !important;
}
.green {
  color: #81b337 !important;
}
</style>
